<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>伪类和伪元素</title>

    <style>
      /*
            伪类：不存在的类，特殊的类
                - 用来描述一个元素的特殊状态，比如第一个子元素、鼠标移入的元素
                - 伪类一般情况下使用:开头
                    :first-child 第一个子元素
                    :last-child 最后一个子元素
                    :nth-child(n) 选中第n个子元素
                        - 特殊值：
                            n 表示第n个
                            2n|even 表示偶数位
                            2n+1|odd 表示奇数位
                        - 以上这些伪类都是根据特殊所有的子元素进行排序
                    :first-of-type
                    :last-of-type
                    :nth-of-type(n)
                        - 这些伪类和上面功能一样，表示同类型元素中排序
                    :not(:last-child)否定伪类，一般表示除最后一个都设置样式

                    超链接专有伪类
                    a:link 表示没访问过的链接
                    a:visited 表示访问过的链接，只能修改颜色

                    :hover 表示鼠标移入的状态
                    :active 表示鼠标点击
         */

      /* ul > li:first-child {
        color: red;
      } */
      /* ul > li:first-of-type {
        color: red;
      } */
      ul > li:not(:nth-of-type(2)) {
        color: aqua;
      }

      a:link {
        color: red;
      }
      a:visited {
        color: aqua;
      }
      a:active {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <span>我是第一个span</span>
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
      <li>第四个</li>
      <li>第五个</li>
    </ul>
    <a href="#1">超链接1</a>
    <a href="#2">超链接2</a>
  </body>
</html>
